<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!--需求
			在子组件里面加一个input，当input改变 子组件 props里面的数值，
			同时vue实例里面的data里对应的num也发生改变-->

			<!--注意不能通过 v-model将input输入框和props里面的属性绑定起来，会报错+
				所以可以添加一个data返回函数 cnumber



				修改vue实例里面的data的数据  （子传父）

				1、在子组件中  先绑定了初始值（绑定了 子组件里面 props里面的数据
				（props里面的数据绑定了Vue示例中的 data里的数据，
				同时props里面的数据，绑定了props里面的数据））
				
				2、当你修改input里面的数据，触发input事件（通过v-on监听），调用cnumberInput方法，
				先将intput输入框的数据赋值给data()函数里面的数据，发出一个自定义事件cnumberchange并携带当前数据

				3、主组件中监听到子组件发出的自定义事件cnumberchange，调用实例中的cnumberChange方法
				控制台输出携带过来的数据，并将该数据赋值给示例中的data数据



				
				修改子组件中的prop数据
				子组件通过监听input事件 ，调用子组件里面的cnumberInput方法，
				通过自定义事件this.$emit("cnumberchange", this.cnumber);
				父组件监听到这个自定义事件 调用方法给 anumber赋值，
				然后又因为 anumber绑定了 子组件里面prop里面的属性
				通过这种方式改变prop的值
				其实就是通过v-bind绑定了vue实例中的数据和props里面的属性值

			-->

		<div id="app">
			<h1>父组件anumber:{{anumber}}</h1>
			<h1>父组件anumber2:{{anumber2}}</h1>
			<hr>
			                                            
			<cpn :bnumber="anumber" :bnumber2="anumber2" @cnumberchange="cnumberChange" @cnumber2change="cnumber2Change" />
		</div>


		<!-- console中访问了子组件的数据
		 app.$children[0].bnumber
		 -->
		<template id="cpn">
			<div>
				<h2>子组件props:{{bnumber}}</h2>
				<h2>子组件data:{{cnumber}}</h2>
				
				<!--input框和data返回函数进行双向绑定-->      <!--监听，一旦用户输入东西的时候，调用函数处理-->
				子组件输入框<input type="text" :value="cnumber" @input="cnumberInput">
			
				<hr>
				<h2>子组件props:{{bnumber2}}</h2>
				<h2>子组件data:{{cnumber2}}</h2>
				子组件输入框<input type="text" :value="cnumber2" @input="cnumber2Input">
			</div>
		</template>


		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">

//子组件
			const cpn = {
				template: '#cpn',

				//子组件通过props将数据传输给父组件，推荐使用对象，因为可以传输很多种数据
				props: {
					bnumber: {
					
						type: Number,
						default: 100
					},
					bnumber2: {
						type: Number,
						required: true,
						default: 200,
						validator(value) {
							console.log("validator---", value);
							return value;
						}
					}
				},

				//要想改变 props，最好通过data函数改变，不能直接通过 v-model绑定，不然会报错
				//这里面的数据是通过上面props里面的属性进行初始化的
				data() {
					return {
						cnumber: this.bnumber,
						cnumber2: this.bnumber2
					}
				},
				methods: {

					cnumberInput(event) {
						//1.将input中的value复制到 data函数中
						this.cnumber = event.target.value;
						//为了让父组件可以修改值，发出一个事件
						this.$emit("cnumberchange", this.cnumber);
						//同时修改cnumber2的值
						this.cnumber2 = this.cnumber * 100;
						this.$emit("cnumber2change", this.cnumber2)
					},
					cnumber2Input(event) {
						this.cnumber2 = event.target.value;
						this.$emit("cnumber2change", this.cnumber2);
						this.cnumber = this.cnumber2 / 100;
						this.$emit("cnumberchange", this.cnumber)
					}
				}
			}
			const app = new Vue({
				el: '#app',
				data: {
					anumber: 1,
					anumber2: 2
				},
				components: {
					cpn
				},
				methods: {
					//通过调用Vue实例中的方法接收子组件自定义事件传过来的值，用于改变实例中的num
					cnumberChange(num) { //这里的参数是String类型，要转换成Number类型
						console.log(num);
						// this.anumber=num*1;
						this.anumber = parseFloat(num);
					},
					cnumber2Change(num) {
						this.anumber2 = num * 1;
					}
				}
			});
		</script>
		<!-- 疑问：通过修改app.anumber，为什么cnumber的值不变 -->
	</body>
</html>
